<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="roleSetSection.isShow" v-if="roleSetSection">
      <div class="modal-ctrl-main even-row-ctrl set-section-modal">
        <div class="modal-title">
          <p>角色关联部门</p>
        </div>
        <div class="modal-ctrl-content">

          <div class="even-row">
              <div class="tree-ctrl-body">
                <!--部门树-->
                <div class="tree-table-ctrl">
                  <div id="tree-roleSetSection"  class="ztree"></div>
                </div>
                <div class="select-selection-body">
                  <ul>
                    <li>
                      已经选择{{ selectSectionLost.length }}个部门
                    </li>
                    <li v-for="(item,index) in selectSectionLost">
                      {{item.name}}
                      <i @click="removeSection(item,index)" class="glyphicon glyphicon-remove"></i>
                    </li>
                  </ul>
                </div>
              </div>
          </div>


        </div>
        <div class="btns text-r">
           <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="roleSetSectionSub">保存</button>
        </div>
      </div>
    </div>

  </transition>
</template>

<script>
  import Pages from "../../sudoku/atom/pages.vue"
    export default {
        name: "RoleSetSection",
        props:["roleId","roleSetSection"],
        data(){
          return{
            isActive :-1,
            treeTableRow:{},
            stationObj:{
              pageSize:20
            },
            treeTable:{
              tHeader:[
                {"key":"stationName","value":"部门名称"},
                {"key":"ipAddress","value":"部门IP"},
                {"key":"orgcode","value":"组织代码"},
                {"key":"tel","value":"联系电话"},
                {"key":"stationNum","value":"组织编号"},
                {"key":"ifUse","value":"当前状态"}
              ]
            },
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            nodesTree:[],
            selectSectionLost:[],
            sessingRoleId:null,
            roleImpowerArr:[] //角色已授权用户列表
          }
        },
        components:{
          Pages
        },
        watch:{
          roleSetSection:{
            handler(v1){
              if( v1.isShow ===true ){
                //console.log(v1);
                //console.log(this.roleId);
                this.sessingRoleId = this.roleId;
                //初始化部门树
                this.treeUserAjax();

              }
            },
            deep:true
          }
        },
        filters:{
          //用户状态转译
          userTranslation(value){
            let displayName = "";
            let valueObj = value[0];
            let key = value[1];
            if( key === "state" ){ //用户状态
              if( valueObj[key] === 1 ){
                displayName = "启用";
              }else if( valueObj[key] === 0 ){
                displayName = "禁用";
              }
            }else if( key === "changeTime" ||key === "createTime"){ //修改时间
              if( valueObj[key] ){
                let timeArr = valueObj[key].split(".");
                displayName = timeArr[0].replace("T"," ")
              }
            }else {
              displayName = valueObj[key]
            }
            return displayName
          }
        },
        mounted(){
          const _this = this;
          this.setting.callback = {
            onClick: function (event, treeId, treeNode) {
              //console.log(treeNode);
              //树结构表格加载
              //console.log(treeNode.isChecked);
              if( treeNode.isChecked ){
                return false;
              }else{
                treeNode.isChecked = true;
                _this.selectSectionLost.push({
                  name: treeNode.name,
                  id: treeNode.id,
                  isChecked: treeNode.isChecked,
                });
              }
              //console.log(_this.selectSectionLost);
            }
          }
        },
        //用户弹窗 部门树加载
        methods:{
          //渲染部门结构树
          treeUserAjax(){
            this.$axios.get(this.HOST+"/station/getOrgaInfo")
              .then((data)=>{
                //console.log(data);
                this.nodesTree = data.data.data;
                //查询角色关联部门
                this.getRoleAndSection();
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          removeSection(obj,index){
            this.selectSectionLost.splice(index,1);
            let id = obj.id;
            //console.log(id);
            for( let i=0;i<this.nodesTree.length;i++ ){
              if( this.nodesTree[i].id === id ){

                for(  let k=0;k<this.nodesTree.length;k++ ){
                  this.nodesTree[k].isChecked = false;
                  for( let i=0;i<this.selectSectionLost.length;i++ ){
                    if( this.nodesTree[k].id ===  this.selectSectionLost[i].id ){
                      this.nodesTree[k].isChecked = true;
                      //console.log(this.nodesTree[k]);
                    }
                  }
                }
                //console.log(this.nodesTree[i].isChecked);
                $.fn.zTree.init($("#tree-roleSetSection"), this.setting,  this.nodesTree);
                let treeObj = $.fn.zTree.getZTreeObj("tree-roleSetSection");
                treeObj.expandAll(true);
              }
            }
          },
          //查询授权
          getRoleAndSection(){
            this.$axios.get(this.HOST+"/roles/getStationIdByRole/"+this.sessingRoleId)
              .then((data)=>{
                //console.log(data);
                let success = data.data;
                //selectSectionLost
                let sectionArr = [];
                for( let i=0;i<success.length;i++ ){
                  //添加授权列表
                  sectionArr.push({
                    id:success[i].id,
                    name:success[i].stationName,
                  });
                }

                for(  let k=0;k<this.nodesTree.length;k++ ){
                  this.nodesTree[k].isChecked = false;
                  for( let i=0;i<success.length;i++ ){
                    if( this.nodesTree[k].id ===  success[i].id ){
                      this.nodesTree[k].isChecked = true;
                      //console.log(this.nodesTree[k]);
                    }
                  }
                }

                $.fn.zTree.init($("#tree-roleSetSection"), this.setting,  this.nodesTree);
                let treeObj = $.fn.zTree.getZTreeObj("tree-roleSetSection");
                treeObj.expandAll(true);
                this.selectSectionLost = sectionArr;
              })
              .catch((err)=>{
                //console.log(err);
              });
          },
          //授权保存
          roleSetSectionSub(){
            //POST /roles/giveUserRoleByStationId/{role}
            let params = [];
            for( let i=0;i<this.selectSectionLost.length;i++ ){
              params.push(this.selectSectionLost[i].id);
            }
            //console.log(params);
            this.$axios.post(this.HOST+"/roles/giveUserRoleByStationId/"+this.sessingRoleId,params)
              .then((data)=>{
                if( data.data ){
                  this.s_alert("关联成功！");
                  // alert("关联成功！");
                  this.s_logwrite("基础信息管理-角色管理","关联了部门");
                  this.close();
                }
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              });
          },
          //关闭角色关联
          close(){
            this.$emit("roleSetSectionClose");
            this.selectSectionLost = [];
            this.nodesTree = [];
            $.fn.zTree.init($("#tree-roleSetSection"), this.setting,  this.nodesTree);
          }
        }

    }
</script>

<style scoped lang="scss">
  .tree-ctrl-body .tree-table-ctrl:nth-of-type(1){
    width: 30%;
  }
  .set-section-modal{
    .modal-ctrl-content{
      .even-row{
        width: 100%;
        float: left;
      }
      .select-selection-body{
        width: 70%;
        height: 100%;
        float: left;
        box-sizing: border-box;
        padding-top: 5px;
        overflow: auto;
        border: 1px rgba(51,51,51,0.1) solid;
        ul{
          width: 100%;
          height: 100%;
          li{
            &:first-child{
              text-align: center;
            }
            line-height: 30px;
            position: relative;
            box-sizing: border-box;
            padding-left: 5px;
            border-bottom: 1px rgba(51,51,51,0.2) solid;
            i{
              position: absolute;
              right: 0;
              top: 0;
              width: 29px;
              height: 29px;
              text-align: center;
              line-height: 29px;
              background-color: #fff;
              z-index: 2;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .modal-ctrl-content {
    height: 300px;
    overflow: hidden;
  }
  .even-row{
    height: 100%;
    border: 1px solid rgba(51,51,51,0.08);
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
